<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!--
      watch 选项，监听

        语法：
          watch: {
            key: value
          }

            key   - 要监听的数据源
              1. 可以使用 . 来监听某个对象的具体属性

            value - 监听处理
              1. 直接一个函数
              2. 包含有 handler 函数的对象 

        handler函数：
          1. 会收到两个参数，分别是 newVal, oldVal
          2. 该函数不会默认触发，除非设置了 immediate 配置项
          3. 该函数不需要返回值
          4. 该函数可以做异步操作、修改DOM、修改外部其他数据
          5. 该函数无法监控深层数据的改变，如果需要深层监听，需要设置 deep 配置项

        基础示例：
          1. first + last = fullName
    -->

    <div id="app">
      <input type="text" v-model="first" />
      <br />
      <input type="text" v-model="last" />
      <br />
      <p>FullName: {{ fullName }}</p>

      <p>userInfo.username {{ userInfo.username }}</p>

      <!-- 修改这个对象，会触发 非 deep 的 watch -->
      <button @click="userInfo = {username: '马六'}">
        直接修改整个 userInfo
      </button>

      <!-- 修改对象的某个属性，不会触发 非 deep 的watch -->
      <button @click="userInfo.username = '王五'">
        直接修改 userInfo.username
      </button>

      <button @click="userInfo.address = '广州市'">userInfo.address</button>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            first: "张",
            last: "三",
            fullName: "张三",
            userInfo: {
              username: "里斯",
              address: "深圳市",
            },
          };
        },

        watch: {
          first(newVal, oldVal) {
            console.log("first 改变了");
            console.log("newVal", newVal);
            console.log("oldVal", oldVal);
          },

          last: {
            handler(newVal, oldVal) {
              console.log("last 改变了");
              console.log("newVal", newVal);
              console.log("oldVal", oldVal);
            },

            immediate: true, // 默认触发一次
          },

          userInfo: {
            handler() {
              console.log("userInfo 改变了");
            },

            deep: true, // 启用深度监听
          },

          // 具体监听对象的某个属性
          "userInfo.address": {
            handler() {
              console.log("userInfo.address 改变了");
            },
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
